<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html lang="en">
<head>
<base href="<%=basePath%>">
<!-- META SECTION -->
<title>${htmlTitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- END META SECTION -->

<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme"
	href="static/css/theme-default.css" />
<!-- EOF CSS INCLUDE -->

<link href="static/css/style.css" rel="stylesheet" type="text/css"
	media="all" />
<link rel="stylesheet" href="static/css/jquery/lrtk.css" type="text/css"
	media="" />
<script src="static/js/jquery/mosaic.1.0.1.js"></script>
<script src="static/js/jquery/lrtk.js"></script>

<style type="text/css">
.font-income {
	font-size: 14px;
}
</style>

<script type="text/javascript">
	$(function(){
		initIncomeChart();
		initIncomePie();
		initVehicleFlowLine();
		initVehicleFlowPie();
	})

	function initIncomeChart() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('incomeBar'));

		// 指定图表的配置项和数据
		var option = {
			color : [ '#3398DB' ],
			title: {
                text: '收入柱状图'
            },
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				},
				formatter: "{b} <br/> {a}: {c}元"
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				data : [ '12/18', '12/19', '12/20', '12/21', '12/22', '12/23', '12/24' ],
				axisTick : {
					alignWithLabel : true
				}
			} ],
			yAxis : [ {
				type : 'value',
				axisLabel: {
		            formatter: '{value} 元'
		        }
			} ],
			series : [ {
				name : '金额',
				type : 'bar',
				barWidth : '60%',
				data : [ 10, 52, 200, 334, 390, 330, 220 ]
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}
	
	function initIncomePie() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('incomePie'));
		var option = {
			    title : {
			        text: '收入构成',
			        subtext: '截止当前天',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c}元 ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['现金','微信','支付宝','E卡通','银联']
			    },
			    series : [
			        {
			            name: '收入来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:[
			                {value:335, name:'现金'},
			                {value:310, name:'微信'},
			                {value:234, name:'支付宝'},
			                {value:135, name:'E卡通'},
			                {value:1548, name:'银联'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}
	
	function initVehicleFlowLine() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('vehicleFlowLine'));

		// 指定图表的配置项和数据
		var option = {
			    title: {
			        text: '车流量折线图'
			    },
			    tooltip: {
			        trigger: 'axis',
					formatter: "{b} <br/> {a}: {c}次"
			    },
			    xAxis:  {
			        type: 'category',
			        boundaryGap: false,
			        data: ['12/18', '12/19', '12/20', '12/21', '12/22', '12/23', '12/24']
			    },
			    yAxis: {
			        type: 'value',
			        axisLabel: {
			            formatter: '{value} 次'
			        }
			    },
			    series: [
			        {
			            name:'车流量',
			            type:'line',
			            data:[11, 11, 15, 13, 12, 13, 10],
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'}
			                ]
			            }
			        }
			    ]
			};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}
	
	function initVehicleFlowPie() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('vehicleFlowPie'));
		var option = {
			    title : {
			        text: '停车流量',
			        subtext: '截止当前天',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c}次 ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['收费放行','自动放行','免费放行','异常放行','手动抬闸放行']
			    },
			    series : [
			        {
			            name: '车流量',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:[
			                {value:335, name:'收费放行'},
			                {value:310, name:'自动放行'},
			                {value:234, name:'免费放行'},
			                {value:135, name:'异常放行'},
			                {value:121, name:'手动抬闸放行'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}
</script>
</head>
<body>

	<%@include file="../header.jsp"%>

	<!-- START PAGE CONTAINER -->
	<div class="page-container">

		<!-- START PAGE SIDEBAR -->
		<%@include file="../left.jsp"%>
		<!-- END PAGE SIDEBAR -->

		<!-- PAGE CONTENT -->
		<div class="page-content">

			<!-- START BREADCRUMB -->
			<!-- END BREADCRUMB -->

			<!-- PAGE CONTENT WRAPPER -->
			<div class="page-content-wrap">
				<div class="row" style="margin-top: 10px;">
					<div class="col-md-3">
						<a href="#" class="tile tile-danger">
							<div class="col-md-12 font-income">
								<div class="col-md-6">总收入</div>
								<div class="col-md-6">￥12000</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">月租车收入</div>
								<div class="col-md-6">￥10000</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">储值车收入</div>
								<div class="col-md-6">￥1000</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">临时车收入</div>
								<div class="col-md-6">￥1000</div>
							</div>
						</a>
					</div>
					<div class="col-md-3">
						<a href="#" class="tile tile-primary">
							<div class="col-md-12 font-income">
								<div class="col-md-6">在场车辆数</div>
								<div class="col-md-6">999辆</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">月租车</div>
								<div class="col-md-6">111辆</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">储值车</div>
								<div class="col-md-6">222辆</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">临时车</div>
								<div class="col-md-6">666辆</div>
							</div>
						</a>
					</div>
					<div class="col-md-3">
						<a href="#" class="tile tile-success">
							<div class="col-md-12 font-income">
								<div class="col-md-6">异常抬杠次数</div>
								<div class="col-md-6">66次</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">免费/异常放行</div>
								<div class="col-md-6">22次</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">手动抬闸放行</div>
								<div class="col-md-6">44次</div>
							</div>
						</a>
					</div>
					<div class="col-md-3">
						<a href="#" class="tile tile-info">
							<div class="col-md-12 font-income">
								<div class="col-md-6">累计车流量</div>
								<div class="col-md-6">888次</div>
							</div>
							<div class="col-md-12 font-income">
								<div class="col-md-6">入场车次</div>
								<div class="col-md-6">99次</div>
							</div>
						</a>
					</div>
				</div>

				<div class="row" style="margin-top: 20px;">
					<div class="col-md-6">
						<div id="incomeBar" style="width: 100%;height:300px;"></div>
					</div>
					<div class="col-md-6">
						<div id="incomePie" style="width: 100%;height:300px;"></div>
					</div>
				</div>
				
				<div class="row" style="margin-top: 40px;">
					<div class="col-md-6">
						<div id="vehicleFlowLine" style="width: 100%;height:300px;"></div>
					</div>
					<div class="col-md-6">
						<div id="vehicleFlowPie" style="width: 100%;height:300px;"></div>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT WRAPPER -->
		</div>
		<!-- END PAGE CONTENT -->
	</div>
	<!-- END PAGE CONTAINER -->
</body>
</html>